<template>
  <a-space>
    <span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>
    <a href="javascript:;" @click="handleDownload">download</a>
    <a href="javascript:;" @click="handleRemove">delete</a>
  </a-space>
</template>
<script lang="ts" name="file-record" setup>
import { ref, unref, onMounted, onUnmounted, nextTick, watchEffect } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage';
import { ImagePreview } from '/@/components/Preview/index';
import { propTypes } from '/@/utils/propTypes';
import { Icon } from '/@/components/Icon';

const { createMessage } = useMessage();
const emit = defineEmits(['remove', 'download']);

const props = defineProps({
  file: propTypes.object.def({}),
});


onUnmounted(() => {
  console.log('onUnmounted-props', unref(props));
})

watchEffect(() => {
 
});

const handleDownload = () => {
  emit('download')
}

const handleRemove = () => {
  emit('remove')
}

</script>

<style lang="less">

</style>
